<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			body{
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555205026&di=cfa7dd3a0faad6322de2241ab958607e&imgtype=jpg&er=1&src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2Ffdltwhic14nOInVfbWIWBxJicJiayBZNic3pYUBVCkIufP359Uf1X4AksEMTTRz3lXGAYoibjavXoLqJtGjIHSdyQ9g%2F640%3Fwx_fmt%3Dgif) no-repeat fixed;
				width:100%;height:100%;  
                 background-size:100% 100%;  
				
			}



			.xc{
				position: absolute;
				 left: 20rem;
                top: 50rem;
			}
			.wz{

				font:italic  bold 5rem STKaiti;
				color:#ff1111
			}
			
			.xc ul{
				width: 25rem;
				height: 25rem;
				/*border: 1px solid;*/
				transform-style: preserve-3d;
				transform: rotateX(-24deg) rotateY(0deg);
				position: relative;
				margin-right: 270px;
				margin-bottom: 150px;
				animation: play 5s infinite linear;
				
				animation-direction: alternate-reverse;
			}
			.xc ul li{
				list-style: none;
				width: 25rem;
				height: 25rem;
				text-align: center;
				line-height: 25rem;
				position: absolute;
			}
			.xc ul li img{
				width: 25rem;
				height: 25rem;
				transition: all 2s;
			}
			.xc ul li:nth-child(1){
				background: red;
				transform: rotateY(60deg) translateZ(25rem);
			}
			.xc ul li:nth-child(2){
				background: orange;
				transform: rotateY(120deg) translateZ(25rem);
			}
			.xc ul li:nth-child(3){
				background: yellow;
				transform: rotateY(180deg) translateZ(25rem);
			}
			.xc ul li:nth-child(4){
				background: green;
				transform: rotateY(240deg) translateZ(25rem);
			}
			.xc ul li:nth-child(5){
				background: pink;
				transform: rotateY(300deg) translateZ(25rem);
			}
			.xc ul li:nth-child(6){
				background: deeppink;
				transform: rotateY(360deg) translateZ(25rem);
			}
			@keyframes play{
				from{
					transform: rotateX(-24deg) rotateY(0deg);
				}
				to{
					transform: rotateX(-24deg) rotateY(360deg);
				}
			}
			.xc ul:hover{
				animation-play-state: paused;
			}
			.xc ul:hover li{
				opacity: .6;
			}
			.xc ul li:hover{
				opacity: 1;
			}
			/*千万不给li设置放大*/
			.xc ul li:hover img{
				transform: scale(1.5);
			}





			.lbt{
				width: 900px;	
				height: 100px;
				border: 1px solid red;
				margin: 50px auto;
				overflow: hidden;
			}
			.lbt ul{
				width: 1800px;
				height: 100px;
				animation: move 5s infinite linear;
			}
			.lbt ul li{
				width: 150px;
				height: 100px;
				list-style: none;
				float: left;
			}
			.lbt ul li img{
				width: 150px;
				height: 100px;
			}
			@keyframes move{
				from{
					margin-left: 0;
				}
				to{
					margin-left: -900px;
				}
			}
			.lbt ul:hover{
				animation-play-state: paused;
			}
			.lbt ul:hover li{
				opacity: .6;
			}
			.lbt ul li:hover{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<marquee scrollamount="20">
			<h1 class="wz">happy birthday to   you</h1>
		</marquee>
		<audio  src="金志文 - 夏洛特烦恼.mp3" autoplay="autoplay"></audio>
		<div class="xc">
		<ul>
			<li><img src="images/10.jpg"/></li>
			<li><img src="images/14.jpg"/></li>
			<li><img src="images/21.jpg"/></li>
			<li><img src="images/26.jpg"/></li>
			<li><img src="images/27.jpg"/></li>
			<li><img src="images/28.jpg"/></li>
		</ul>
		</div>
		<div class="lbt">
			<ul>
				<li><img src="images/10.jpg"/></li>
				<li><img src="images/21.jpg"/></li>
				<li><img src="images/25.jpg"/></li>
				<li><img src="images/5.jpg"/></li>
				<li><img src="images/26.jpg"/></li>
				<li><img src="images/28.jpg"/></li>
				<li><img src="images/10.jpg"/></li>
				<li><img src="images/21.jpg"/></li>
				<li><img src="images/25.jpg"/></li>
				<li><img src="images/5.jpg"/></li>
				<li><img src="images/26.jpg"/></li>
				<li><img src="images/28.jpg"/></li>
			</ul>
		</div>
	</body>
</html>
